<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>

<body id="page-top">

	<div id="wrapper">	
	
	<style type="text/css">
		.table-bordered {
			border-top: 0px !important;
			border-left: 0px !important;
			border-right: 0px !important;
		}

		.table thead th {
			border-bottom-width: 0px !important;
		}

		tr td:nth-child(2) {
			padding: 0px !important;
		}

		.layui-layer-btn .layui-layer-btn0 {
			color: #fff !important;
		}
	</style>

		<div id="content-wrapper">
			<div class="container-fluid">

				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">账户管理</a></li>
				</ol>

				<form class="form-inline" id="trainingSearchForm">
					<div class="input-group mb-2 mr-sm-2">
						<select name="condition[masterCode]" style="width: 200px"
							id="inputState" class="form-control">
							<option value="">全局</option>
							<option th:each="m:${schools}" th:text="${m.masterName}"
								th:value="${m.masterCode}"></option>
						</select>
					</div>
					<div class="input-group mb-2 mr-sm-2">
						<input name="condition[phone|like]" type="text"
							class="form-control" placeholder="手机号">
					</div>
					<div class="input-group mb-2 mr-sm-2">
						<input type="text" class="form-control"
							name="condition[nickname|like]" placeholder="昵称">
					</div>

					<div class="input-group mb-2 mr-sm-2">
						<input type="text" class="form-control"
							name="condition[realName|like]" placeholder="姓名">
					</div>

					<div class="input-group mb-2 mr-sm-2">
						<select name="condition[fieldProp]" id="inputState"
							class="form-control">
							<option value="" selected>状态</option>
							<option value="apply">申请</option>
							<option value="member">普通会员</option>
							<option value="runman">人员</option>
							<option value="unsub">取消关注</option>
						</select>
					</div>

					<button type="button" onclick="search(this)"
						class="btn btn-primary mb-2">搜索</button>
				</form>
				<div class="span12">
					<div class="table-responsive">
						<table class="table table-bordered" id="dataTable" width="100%"
							cellspacing="0">
							<thead>
								<tr>
									<th style="max-width: 150px">所属机房</th>
									<th>头像</th>
									<th style="min-width: 200px">昵称</th>
									<th>手机</th>
									<th>性别</th>
									<!-- 
										<th style="max-width:80px;">权限</th>
										 -->
									<th style="min-width: 100px">状态</th>
									<th>积分</th>
									<th>添加时间</th>
									<th style="max-width: 150px">操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
							<footer>
								<tr>
									<th>所属机房</th>
									<th>头像</th>
									<th>昵称</th>
									<th>手机</th>
									<th>性别</th>
									<!-- 
										<th>权限</th>
										 -->
									<th>状态</th>
									<th>积分</th>
									<th>添加时间</th>
									<th>操作</th>
								</tr>
							</footer>
						</table>
					</div>
				</div>

			</div>
		</div>
	</div>

	<script
		src="http://training-static.linesno.com/vendor/jquery/jquery.min.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="http://training-static.linesno.com/layer/layer.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/jquery-easing/jquery.easing.min.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/datatables/jquery.dataTables.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/datatables/dataTables.bootstrap4.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		  $('#dataTable').DataTable({
			  serverSide: true ,
			  ordering: false , 
			  searching : false ,
              bLengthChange : false ,
              rowNum : 15 , 
              destroy: true,
              retrieve:true,
              multiselect : true,
              ajax : {
                  "url": "/manager/member_list_data",
                  "dataType": "json" , 
                  "data": function (d) {
                      console.log('d = ' + d) ;
                      var searchParams = paramsBuilder() ;
                      if(searchParams){
                        $.extend(d,searchParams); 
                      }
                  }
              } ,
              columns: [
                  { data: 'masterCode_label' },
                  { data: 'headImgUrl' },
                  { data: 'nickname' },
                  { data: 'phone' },
                  { data: 'sexDesc' },
                  { data: 'fieldPropLabel' },
                  { data: 'integral' },
                  { data: 'addTime' }
              ] , 
              columnDefs: [
            	  {
                  "render": function(data, type, row) {
                	  	  console.log('data = ' + data + 'type =' + type + ' row = ' + row) ; 
                      return '<img style="margin:5px;border-radius:5px" id="headerImg" src="'+data+'" width="30px" height="30px"/>';
                  },
                  "targets": 1
              } ,
            	  {
                  "render": function(data, type, row) {
                	  	  var realName = row.realName ; 
                	  	  if(realName !== '' && realName != null){
                	  		return realName ; //+"("+data+")" ; 
                	  	  }else{
						var id = row.id ; 
						return "<a style='cursor:pointer' data-id='"+id+"' onclick='realName(this)'>"+data+"</a>" ; 
                	  	  }
                  },
                  "targets": 2
              } ,
              {
                  "render": function(data, type, row) {
                	  		var fieldProp = row.fieldProp ; 
                	  		var id = row.id ; 
                	  		if('apply' === fieldProp){ 	//申请中
                	  			var html = "<a style='cursor:pointer' data-id='"+id+"' onclick='applyRunman(this);'><i class='fa fa-feather'></i> "+data+"</a>" ; 
                	  			return html ; 
                	  		}else if('runman' === fieldProp){  //人员
                	  			var html = "<a style='cursor:pointer' data-id='"+id+"' onclick='stopRunman(this);' ><i class='fa fa-leaf'></i> "+data+"</a>" ; 
                	  			return html ; 
                	  		}else{
                	  			var html = "<a><i class='fa fa-user'></i></a>" ; 
                	  			return html ; 
                	  		}
   		           		return data ;
                  },
                  "targets": 5
              } ,
              {
                  "render": function(data, type, row) {
                	  	  var id = '"' + row.id + '"';
   		           	  var html = "<a style='cursor:pointer;' onclick='userIntegral("+id+");'><i class='fa fa-gavel'></i> "+data+"</a>" ; 
   		           	  return html ; 
                  },
                  "targets": 6
              } ,
              {
                  "render": function(data, type, row) {
                	  		var id = '"' + row.id + '"';
   		           		var html = "<a style='cursor:pointer;' onclick='userDetail("+id+");'><i class='fa fa-leaf'></i> 查看</a>" ; 
   		           		if(row.hasStatus == 1){
							html += "<a style='cursor:pointer;margin-left:10px;color:red' onclick='changeStatus("+id+");'><i class='fa fa-user-times'></i> 禁用</a>" ; 
   		           		}else{
							html += "<a style='cursor:pointer;margin-left:10px;' onclick='changeStatus("+id+");'><i class='fa fa-user-plus'></i> 启用</a>" ; 
   		           		}
   		           		return html;
                  },
                  "targets": 8
              }
              ],
              language : {
                  "sProcessing": "处理中...",
                  "sLengthMenu": "显示 _MENU_ 项结果",
                  "sZeroRecords": "没有匹配结果",
                  "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                  "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                  "sInfoPostFix": "",
                  "sSearch": "搜索:",
                  "sUrl": "",
                  "sEmptyTable": "表中数据为空",
                  "sLoadingRecords": "载入中...",
                  "sInfoThousands": ",",
                  "oPaginate": {
                      "sFirst": "首页",
                      "sPrevious": "上页",
                      "sNext": "下页",
                      "sLast": "末页"
                  },
                  "oAria": {
                      "sSortAscending": ": 以升序排列此列",
                      "sSortDescending": ": 以降序排列此列"
                  }
             }

		  });
		});
		
		//搜索
		function search(btn){
			// $('#dataTable').draw();
			$("#dataTable").dataTable().fnDraw(false);
		}
	
		// 输入真实名称
		var readNameDoing = false ; 
		function realName(btn){
			if(readNameDoing){
				return ; 
			}
			// var loadingIndex = layer.load(1, { shade: [0.8,'#000']  });
			var id = $(btn).attr("data-id") ; 
			var i = layer.prompt({title: '用户真实姓名', formType: 0}, function(text, index){
				var remark = $("#remark").val() ; 
				readNameDoing = true ; 
				
				$.post("/manager/userRealName" , {id:id , realName:text , userRemark:remark} , function(response){
					readNameDoing = false ; 
					// layer.close(loadingIndex) ; 
					
					if(response.code == 200){
						layer.close(i) ; 
						$(btn).html(response.data) ; 
						$(btn).removeAttr("onclick") ; 
						
						$("#dataTable").dataTable().fnDraw(false);
					}else{
						layer.msg(response.message) ; 
					}
					
				}) ; 
				
			});	
			$(".layui-layer-content").append("<br/><input type=\"text\" id= \"remark\" class=\"layui-layer-input\" placeholder=\"备注信息\"/>")
		}
		
		/**
		 * get params
		 */
		function paramsBuilder() {
		    var param = {} ;
		    $('#trainingSortPanel input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    var i = $('#trainingSearchForm input') ; 
		    console.log("i = " + i) ; 
		    $('#trainingSearchForm input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    $('#trainingSearchForm select').each(function() {
		        console.log('value = ' + this.value + ' , value = ' + $(this).val());
		        if ($(this).val() != null &&  $(this).val() != '' && this.name != '') {
		            param[this.name] = $(this).val() ;
		        }
		    });
		    return param ;
		}
		
		var applyManDoing = false ; 
		function applyRunman(btn){ 
			if(applyManDoing){
				return ; 
			}
			applyManDoing = true ; 
			layer.confirm('是否通过镖师的申请,通过了用户会接收到订单的推送？', {
			  btn: ['通过','不通过'] //按钮
			}, function(){  // 通过 
				
				var id = $(btn).attr("data-id") ; 
				var index = layer.load(1, { shade: [0.8,'#000']  });
				$.get("/manager/applyMan?id="+id +"&code=runman" , function(response){
					console.log("response= " + response) ; 	
					applyManDoing = false ;
					layer.closeAll() ; 
					if(response.code == 200){
						$(btn).html("<i class='fa fa-leaf'></i> "+response.message) ; 
						$("#dataTable").dataTable().fnDraw(false);
					}else{
						layer.alert(response.message) ; 
					}
				}) ; 
				
			} , function(){  // 不通过 
				var id = $(btn).attr("data-id") ; 
				var index = layer.load(1, { shade: [0.8,'#000']  });
				$.get("/manager/applyMan?id="+id +"&code=member" , function(response){
					console.log("response= " + response) ; 	
					applyManDoing = false ;
					layer.closeAll() ; 
					if(response.code == 200){
						$(btn).html("<i class='fa fa-leaf'></i> "+response.message) ; 
						$("#dataTable").dataTable().fnDraw(false);
					}else{
						layer.alert(response.message) ; 
					}
				}) ; 
			});
		}
		
		var stopManDoing = false ; 
		function stopRunman(btn){ 
			if(stopManDoing){
				return ; 
			}
			stopManDoing = true ; 
			layer.confirm('调整人员状态？', {
			  btn: ['普通会员','取消'] //按钮
			}, function(){
				var id = $(btn).attr("data-id") ; 
				var index = layer.load(1, { shade: [0.8,'#000']  });
				$.get("/manager/stopMan?id="+id +"&code=member" , function(response){
					console.log("response= " + response) ; 	
					stopManDoing = false ;
					layer.closeAll() ; 
					if(response.code == 200){
						$(btn).html("<i class='fa fa-leaf'></i> "+response.message) ; 
						$("#dataTable").dataTable().fnDraw(false);
					}else{
						layer.alert(response.message) ; 
					}
				}) ; 
			} , function(){
				stopManDoing = false ; 
			});
		}
		
		function userDetail(uid){
			layer.open({
			      type: 2,
			      title: '会员详情',
			      shadeClose: false ,
			      shade: 0.8, 
			      maxmin: true, //开启最大化最小化按钮
			      area: ['50%', '80%'],
			      content: '/manager/member_detail?userId='+uid
			});	
		}
		
		function userIntegral(uid){
			layer.open({
			      type: 2,
			      title: '用户积分',
			      shadeClose: false ,
			      shade: 0.8, 
			      maxmin: true, //开启最大化最小化按钮
			      area: ['50%', '80%'],
			      content: '/manager/member_integral?userId='+uid
			});	
		}
		
		function changeStatus(uid){
			console.log("user id = " + uid) ; 
			$.get("/manager/changeStatus?id="+uid , function(response){
				$("#dataTable").dataTable().fnDraw(false);
			}) ; 
		}
		
	</script>

</body>

</html>
